<script setup>
import { useI18n } from 'vue-i18n'
import { validateIpAddress } from '@/utils/tools'
import popupMessage from '@/components/popupMessage/popupMessage.vue'
const { t } = useI18n()

defineProps({
  btnText: {
    type: String,
    required: true
  },
  btnProps: {
    type: Object,
    default: () => {
      return {}
    }
  },
  title: {
    type: String,
    required: true
  },
  style: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const popupRef = ref(null)

const openPopup = () => {
  popupRef?.value?.openModal()
}

const formRef = ref(null)
const model = ref({
  name: '',
  ip: '',
  readCommunity: '',
  writeCommunity: '',
  belong: ''
})
const validatorIp = (_, value) => {
  return value.length == 0 ? true : validateIpAddress(value)
}
const rules = {
  name: [
    {
      required: true,
      message: t('system.requireTip'),
      trigger: ['blur']
    }
  ],
  ip: [
    {
      required: true,
      message: t('system.requireTip'),
      trigger: ['blur']
    },
    {
      validator: validatorIp,
      message: t('system.ipAddressFormat'),
      trigger: ['input']
    }
  ],
  readCommunity: [
    {
      required: true,
      message: t('system.requireTip'),
      trigger: ['blur']
    }
  ],
  writeCommunity: [
    {
      required: true,
      message: t('system.requireTip'),
      trigger: ['blur']
    }
  ],
  belong: [
    {
      required: true,
      message: t('system.requireTip'),
      trigger: ['blur']
    }
  ]
}

const confirmHandle = () => {
  formRef.value?.validate((errors) => {
    if (!errors) {
    } else {
    }
  })
}
</script>

<template>
  <n-button v-bind="btnProps" @click="openPopup" :style="style">{{ btnText }}</n-button>
  <popupMessage ref="popupRef" :title="title" @confirmHandle="confirmHandle">
    <n-form ref="formRef" :model="model" :rules="rules">
      <n-form-item path="name" :label="t('permission.userName')">
        <n-input v-model:value="model.name" />
      </n-form-item>
      <n-form-item path="ip" show-password-on="click" :label="t('permission.password')">
        <n-input type="password" show-password-on="mousedown" placeholder="密码" :maxlength="8" />
      </n-form-item>
      <n-form-item path="aa" :label="t('alarm.phone')">
        <n-input v-model:value="model.readCommunity" />
      </n-form-item>
      <n-form-item path="writeCommunity" :label="t('alarm.mailBox')">
        <n-input v-model:value="model.writeCommunity" />
      </n-form-item>
      <n-form-item path="belong" :label="t('permission.role')">
        <n-select v-model:value="model.belong" :options="[]" />
      </n-form-item>
    </n-form>
  </popupMessage>
</template>

<style scoped></style>
